<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索内容">
                <a-input v-model="queryParam.name" placeholder="请填写关键词" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="核销状态">
                <a-select placeholder="核销状态" v-model="queryParam.status">
                  <a-select-option value="0">待核销</a-select-option>
                  <a-select-option value="1">已核销</a-select-option>
                  <a-select-option value="-1">全部</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button @click="refresh" type="primary"> 查询 </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">

      <!-- 订单列表 -->
      <a-spin :spinning="spinning">
        <OrderListTable ref="listTable" :list_th="list_th" :pagaData="pagaData"> </OrderListTable>
      </a-spin>
      <div style="float: right">
        <Pagination
          v-model="queryParam.pageNo"
          :page-size.sync="pageSize"
          @change="paginationChange"
          :total="totalCount"
          show-less-items
        />
      </div>
      <!-- 订单列表 -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { orderList } from '@/api/plugin/integral'
import { STable } from '@/components'
import { Pagination } from 'ant-design-vue'
import OrderListTable from './components/OrderListTable.vue'

const columns = [
  {
    title: '商品信息',
    dataIndex: 'origin_name',
    scopedSlots: { customRender: 'name' },
    width: 200,
  },
  {
    title: '订单号',
    dataIndex: 'order_no',
    width: 150,
  },
  {
    title: '规格',
    width: 200,
    dataIndex: 'attr_str',
  },
  {
    title: '花费积分',
    dataIndex: 'cost',
    width: 60,
  },
  {
    title: '用户信息',
    dataIndex: 'user_id',
    scopedSlots: { customRender: 'user_info' },
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'is_clerk',
    scopedSlots: { customRender: 'clerk' },
    width: 40,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 40,
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'IntegralOrder',
  components: {
    STable,
    OrderListTable,
    Pagination,
  },
  data() {
    return {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      columns: columns,
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数
      loadData: (parameter) => {
        var newObj = {}
        Object.assign(newObj, parameter, this.queryParam)
        return orderList(newObj).then((res) => {
          return res.data
        })
      },
      queryParam: {
        name: '',
        status: '-1',
        pageNo: 1,
      },
      spinning: false,
      list_th: [
        { type: 'list', title: '商品信息', span: 8 },
        { type: 'list', title: '规格', span: 4 },
        { type: 'list', title: '花费积分', span: 4 },
        { type: 'list', title: '用户信息', span: 4 },
        { type: 'list', title: '状态', span: 4 },
      ],
      pagaData: [],
      totalCount: 0,
      pageSize: 10,
    }
  },
  activated() {
    this.$refs.tableList.$data.localDataSource = []
    this.$refs.tableList.refresh(false)
  },
  created() {
    this.getOrderList()
  },
  methods: {
    getOrderList() {
      this.spinning = true
      orderList(this.queryParam)
        .then((res) => {
          if (!res.code) {
            this.pagaData = res.data.data
            this.totalCount = res.data.totalCount
          }
          this.spinning = false
        })
        .catch((err) => {
          this.spinning = false
        })
    },
    paginationChange(e) {
      console.log(e, this.queryParam)
      this.getOrderList(this.queryParam)
    },
    changeTab(val) {
      if (val == 1) {
        this.$router.push({ name: 'IntegralGoods' })
      }
      if (val == 3) {
        this.$router.push({ name: 'IntegralSetting' })
      }
    },
    refresh(row) {
      this.$nextTick(() => {
        this.$refs.tableList.refresh(true)
      })
    },
  },
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
</style>
